<script setup>
import { useRouter } from 'vue-router';
const router = useRouter()

function switchTo(routerName) {
    router.push(routerName)
}


</script>
<template>
    <div id="outer">
        <div class="column">
            <div class="row">
                <div @click="switchTo('Chat')" class="card">Chat</div>
                <div @click="switchTo('ChatKnowledge')" class="card">Chat Knowledge</div>
            </div>
            <div class="row">
                <div @click="switchTo('ChatSQL')" class="card">Chat SQL</div>
                <div @click="switchTo('ChatDatabase')" class="card">Chat Database</div>
            </div>
            <div class="row">
                <div @click="switchTo('ChatAll')" class="card2">Chat ALL</div>
            </div>
        </div>

        <div>

        </div>
    </div>
</template>
<style scoped>
#outer {
    margin: auto;
    width: 80%;
    height: 80%;
}

.column {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.row {
    width: 100%;
    height: 40%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 2%;
}

.card {
    width: 40%;
    height: 100%;
    margin-left: 2.5%;
    margin-right: 2.5%;
    background-color: aliceblue;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-size: larger;
    font-weight: 900;
}

.card2 {
    width: 85%;
    height: 100%;
    margin-left: 2.5%;
    margin-right: 2.5%;
    background-color: aliceblue;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-size: larger;
    font-weight: 900;
}
</style>